import React from 'react'
import style from './chat.module.less'
import { Avatar, List, message } from 'antd';
import moment from 'moment'; // 用于格式化时间


export default function Chat() {
    const messageList = [
        {
            id: 1,
            type: 'text',
            content: '你在干嘛',
            time: '2023-01-01 12:00:00',
            user: {
                id: 1,
                name: '刘小鹏',
                avatar: 'http://q1.qlogo.cn/g?b=qq&nk=2479489050&s=100'
            }
        },
        {
            id: 2,
            type: 'text',
            content: '在读书ing',
            time: '2023-01-01 12:05:00',
            user: {
                id: 2,
                name: '万小梦',
                avatar: 'http://q1.qlogo.cn/g?b=qq&nk=2137912144&s=100'
            }
        },
        {
            id: 3,
            type: 'text',
            content: '有点饿了',
            time: '2023-01-01 12:10:00',
            user: {
                id: 1,
                name: '刘小鹏',
                avatar: 'http://q1.qlogo.cn/g?b=qq&nk=2479489050&s=100'
            }
        },
        {
            id: 4,
            type: 'text',
            content: 'me too',
            time: '2023-01-01 12:15:00',
            user: {
                id: 2,
                name: '万小梦',
                avatar: 'http://q1.qlogo.cn/g?b=qq&nk=2137912144&s=100'
            }
        }
    ];

    const formatTime = (timeString) => {
        return moment(timeString).format('YYYY-MM-DD HH:mm');
    };

    const renderMessage = (message) => {
        const { content, time, user } = message;
        const isSelf = user.id === 1; // 假设用户ID为1是自己
        const avatar = user.avatar;
        const formattedTime = formatTime(time);

        return (
            <List.Item style={{border: 'none'}} key={message.id} className={style.messageItem}>
                {isSelf ? (<div className={style.selfMessage}>

                    <div className={style.message}>
                        <div className={style.time}>{formattedTime}</div>
                        <div className={style.content}>
                            {
                                content
                            }
                        </div>
                    </div>
                    <Avatar src={avatar} className={style.avatar}/>
                </div>) : (
                    <div className={style.otherMessage}>
                        <Avatar src={avatar} className={style.avatar}/>
                        <div className={style.message}>
                            <div className={style.time}>{formattedTime}</div>
                            <div className={style.content}>
                                {
                                    content
                                }
                            </div>
                        </div>
                    </div>
                )}
            </List.Item>
        );
    };

    return (
        <div className={style.container}>
            <List
                itemLayout="horizontal"
                dataSource={messageList}
                renderItem={(item) => renderMessage(item)}
                style={{height: 'calc(100vh - 64px)', overflowY: 'auto' }}
            />
        </div>
    );
}